<script>
	$(document).ready(function(){
		$(".error-inner").each(function(){
			if($(this).html() == '') {
				$(this).css("visibility", "hidden");
				$(this).siblings(".error-left").css("visibility", "hidden");
			}
		});
			
	 	
	});
	
	$(document).ready(function(){
		$.validator.addMethod(
		        "extension",
		        function(value, element) {
		        	var ext = (-1 !== value.indexOf('.')) ? value.replace(/.*[.]/, '').toLowerCase() : '';
		            var allowed = ['jpg', 'jpeg', 'png'];		            
		           
		            for (var i=0; i<allowed.length; i++){
		                if (allowed[i].toLowerCase() == ext){ return true;}    
		            }
		            
		            return false;
		        },
		        "Please choose the right format(jpg, jpeg, png)!"
		);		
	 	$('form[name="addBook"]').validate({
	    	rules: {
				title: { required: true},
				weight: { required: true, digits: true},
				summary: {required: true},
				detail: {required: true},
				thumbnail: {required: true, extension: true}
			},
			errorPlacement: function(error, element){
				$(element).parents('td').next().children(".error-inner").html(error);
										        
		        				
			},
			//errorClass: "",
			highlight: function(element, errorClass) {				
				$(element).parents('td').next().children(".error-left, .error-inner").css("visibility", "visible");
				
			},
			unhighlight: function(element, errorClass) {
				$(element).parent('td').next().children(".error-left, .error-inner").css("visibility", "hidden");
				
			}
		    
		});
	});
	
</script>
<form name="addBook" method="post" action="" enctype="multipart/form-data" onsubmit="return checkInput();">
	<table border="0" cellpadding="0" cellspacing="0"  id="id-form">
    
   	<!--  start step-holder -->

		<div id="step-holder">

			<div class="step-no">1</div>

			<div class="step-dark-left"><a href="">Add book details</a></div>

			<div class="step-dark-right">&nbsp;</div>

			<div class="step-no-off">2</div>

			<div class="step-light-left">Select related books</div>

			<div class="step-light-right">&nbsp;</div>

			<div class="step-no-off">3</div>

			<div class="step-light-left">View All Books</div>

			<div class="step-light-round">&nbsp;</div>

			<div class="clear"></div>

		</div>

		<!--  end step-holder -->
        
        	<p>

		      	<span style = "color : red;"><strong>*All fields are required</strong></span>

			</p>
            <br />


			<tr>

				<th valign="top">Title</th>

				<td><input type="text" id="title" name="title" class="inp-form" /></td>
				<td>
				<div class="error-left"></div>
				<div class="error-inner"></div>
				</td>
			

			</tr>
			
			<tr>

				<th valign="top">Weight:</th>

				<td><input type="text" id="weight" name="weight" class="inp-form" /></td>
				<td>
				<div class="error-left"></div>
				<div class="error-inner"></div>
				</td>
				

			</tr>
			
			<tr>

			<th valign="top">Summary:</th>

			<td><textarea rows="" name="summary" cols="" class="form-textarea"></textarea></td>

			<td>
			<div class="error-left"></div>
			<div class="error-inner"></div>
			</td>

		</tr>
			
			<tr>

			<th valign="top">Detail:</th>

			<td><textarea rows="" name="detail" cols="" class="form-textarea"></textarea></td>

			<td>
			<div class="error-left"></div>
			<div class="error-inner"></div>
			</td>

		</tr>

			<tr>

			<th valign="top">Category:</th>

			<td>	

			<select  name="category" class="styledselect_form_1" value="All">

				<!--<option value="">{BstocatContent}</option> -->
				{bstoCatContent}

			</select>

			</td>

			<td>
			<div class="error-left"></div>
			<div class="error-inner"></div>
			</td>

			</tr>

		<tr>

		<th>Picture:</th>

		<td><input id="thumbnail" name="thumbnail" type="file" class="file_1" /></td>

		<td>
			<div class="error-left"></div>
			<div class="error-inner"></div>
		</td>

		</tr>	

		

		<tr>

			<th>&nbsp;</th>

			<td valign="top">

				<input name ="submit" type="submit" value="" class="form-submit" />

				<input name ="reset" type="reset" value="" class="form-reset"  />

			</td>

			<td></td>

		</tr>

		</table>
</form>
